<template>
  <div class="area-selection-box">
    <div class="selection-title">
      <span>比选方案结果</span>
    </div>
    <div class="selection-content">
      <div class="content-left">
        <div class="left-title">
          <span>场次名称</span>
        </div>
        <div class="left-list">
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
          <div class="list-item">
            <span>20211019-20211030</span>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-box">
          <div class="box-item">
            <div class="item-title">
              <span>方案名称:</span>
              <span>新安江+1维</span>
            </div>
            <div class="item-content">
              <div class="item-form">
                <div class="item">
                  <span>场次名称</span>
                  <span>20211019-20211030</span>
                </div>
                <div class="item">
                  <span>开始/结束时间</span>
                  <span>20211019-20211030</span>
                </div>
              </div>
              <div class="item-form">
                <div class="item">
                  <span>计算耗时</span>
                  <span>0.1min</span>
                </div>
                <div class="item">
                  <span>评定结果</span>
                  <span class="status">合格</span>
                </div>
              </div>
              <el-table border :data="state.tableData" style="width: 100%" highlight-current-row size="small"
                empty-text="暂无数据">
                <el-table-column prop="date" label="模拟洪锋（m³/s）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测洪锋（m³/s）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="洪锋相对误差%" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="模拟洪量（10⁶m³）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测洪量（10⁶m³）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="洪锋相对误差%" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="模拟峰现时间" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测峰现时间" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="误差(时段)h" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="许可误差（时段）h" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="确定性系数" width="150" align="center" show-overflow-tooltip />
              </el-table>
              <div class="echarts-box">
                <morey-chart :height="'150px'" :x-labels="['04-10', '04-12', '04-14', '04-16', '04-18', '04-21']"
                  :realwater-level="[34, 43, 16, 98, 66, 88]" :rain-area="[34, 43, 16, 8, 66, 8]"
                  :simulate-water="[3, 3, 165, 83, 66, 89]" :real-flow="[34, 46, 6, 8, 66, 86]"
                  :simulate-flow="[12,66,77,89,12,70]" />
              </div>
            </div>
          </div>
          <div class="box-item">
            <div class="item-title">
              <span>方案名称:</span>
              <span>新安江+1维</span>
            </div>
            <div class="item-content">
              <div class="item-form">
                <div class="item">
                  <span>场次名称</span>
                  <span>20211019-20211030</span>
                </div>
                <div class="item">
                  <span>开始/结束时间</span>
                  <span>20211019-20211030</span>
                </div>
              </div>
              <div class="item-form">
                <div class="item">
                  <span>计算耗时</span>
                  <span>0.1min</span>
                </div>
                <div class="item">
                  <span>评定结果</span>
                  <span class="status">合格</span>
                </div>
              </div>
              <el-table border :data="state.tableData" style="width: 100%" highlight-current-row size="small"
                empty-text="暂无数据">
                <el-table-column prop="date" label="模拟洪锋（m³/s）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测洪锋（m³/s）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="洪锋相对误差%" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="模拟洪量（10⁶m³）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测洪量（10⁶m³）" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="洪锋相对误差%" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="模拟峰现时间" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="实测峰现时间" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="误差(时段)h" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="许可误差（时段）h" width="150" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="确定性系数" width="150" align="center" show-overflow-tooltip />
              </el-table>
              <div class="echarts-box">
                <morey-chart :height="'150px'" :x-labels="['04-10', '04-12', '04-14', '04-16', '04-18', '04-21']"
                  :realwater-level="[34, 43, 16, 98, 66, 88]" :rain-area="[34, 43, 16, 8, 66, 8]"
                  :simulate-water="[3, 3, 165, 83, 66, 89]" :real-flow="[34, 46, 6, 8, 66, 86]"
                  :simulate-flow="[12,66,77,89,12,70]" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import moreyChart from '@/components/app-echart/morey-chart.vue'
const state = reactive({
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
})
</script>
<style lang="less" scoped>
.area-selection-box {
  width: 100%;
  height: 100%;
  .selection-title {
    height: 30px;
    margin-left: 20px;
    span {
      color: #5583e6;
      font-size: 16px;
    }
  }
  .selection-content {
    display: flex;
    width: 100%;
    height: 500px;
    .content-left {
      width: 200px;
      height: 100%;
      .left-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        background: #eee;
        span {
          color: black;
        }
      }
      .left-list {
        height: calc(100% - 40px);
        overflow-y: auto;
        .list-item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
          cursor: pointer;

          &:hover {
            span {
              color: #5583e6;
            }
          }
        }
      }
    }
    .content-right {
      width: calc(100% - 170px);
      height: 100%;
      box-sizing: border-box;
      padding: 0 15px;
      .right-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .box-item {
          margin-top: 25px;
          width: 100%;
          .item-title {
            height: 50px;
            span:nth-of-type(1) {
              // color: #eee;
            }
            span:nth-of-type(2) {
              color: #5583e6;
            }
          }
          .item-content {
            width: 100%;
            .item-form {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              width: 100%;
              .item {
                margin-right: 10px;
                height: 30px;
                span:nth-of-type(2) {
                  font-weight: 600;
                  margin-left: 20px;
                }
                .status {
                  color: yellowgreen;
                }
              }
            }
            :deep(.el-table) {
              padding-right: 20px;
            }
            .echarts-box {
              width: 100%;
              height: 100%;
              margin-top: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
